<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Ant Design Landing - Ant Design Landing Page 的模板与规范</title>
  <meta name="Description" content="Ant Design Landing 平台拥有丰富的各类首页模板，下载模板代码包，即可快速使用，也可使用首页编辑器，快速搭建一个属于你的专属首页" />
  <link rel="stylesheet" type="text/css" href="edit.css" />
  <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/XPHxlVUyZBsQhXBPheZl.png" type="image/x-icon">
  <!--[if lt IE 10]>
  <script
    src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
  <![endif]-->
  <script>
    if (window.location.port) {
      document.domain = document.domain;
    }
  </script>
  <style>
    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    #ant-motion-load {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      -webkit-filter: url("#goo");
      filter: url("#goo");
      opacity: 0;
      transition: opacity .5s;
    }

    #ant-motion-load ul {
      position: absolute;
      top: 50%;
      left: 50%;

    }

    #ant-motion-load ul li {
      width: 18px;
      height: 18px;
      border-radius: 100%;
      background: #019BF0;
      position: absolute;
      transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transform: scale(1);
    }

    #react-content:empty+#ant-motion-load {
      opacity: 1;
    }
  </style>

  <script>
    (function () {
      function isLocalStorageNameSupported() {
        var testKey = 'test';
        var storage = window.localStorage;
        try {
          storage.setItem(testKey, '1');
          storage.removeItem(testKey);
          return true;
        } catch (error) {
          return false;
        }
      }
      // 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
      var pathname = location.pathname;
      function isZhCN(pathname) {
        return /-cn\/?$/.test(pathname);
      }
      function getLocalizedPathname(path, zhCN) {
        var pathname = path.startsWith('/') ? path : '/' + path;
        if (!zhCN) { // to enUS
          if (/^\/?index-cn/.test(pathname)) {
            return '/';
          }
          return /\/?index-cn/.test(pathname) ? pathname.replace('/index-cn', '') : pathname.replace('-cn', '');
        } else if (pathname === '/') {
          return '/index-cn';
        } else if (pathname.match('/edit')) {
          return '/edit/index-cn';
        } else if (pathname.endsWith('/')) {
          return pathname.replace(/\/$/, '-cn/');
        }
        return pathname + '-cn';
      }
      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
      if (isLocalStorageNameSupported()) {
        var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })()
  </script>

  <!--[if lte IE 10]>
  <script
    src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
  <![endif]-->
  <script>
    if (!window.Intl) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
    }
    if (!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
    }
  </script>
</head>

<body>
  <div id="react-content"></div>
  <div id="ant-motion-load">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
        </filter>
      </defs>
    </svg>
    <ul />
  </div>
  <script>
    var w = 100, h = 113, r = 18,
      wx = w / 2, wy = h / 2 - r, angle = 45, liArray = [],
      load = document.getElementById('ant-motion-load'),
      ul = load.getElementsByTagName('ul')[0];
    for (var i = 0; i < 74; i++) {
      var li = document.createElement('li');//$('<li/>').appendTo($('#ant-motion-load ul'));
      ul.appendChild(li);
      liArray.push(li);
      var _left = 110, _top = 110, _x, _y;
      if (i < 25) {
        _left = -wx;
        _top = wy - r / 5 * i;
      } else if (i < 41) {
        angle = 45 * Math.PI / 180;
        _left = -wx + (i - 24) * (r / 5) * Math.cos(angle);
        _top = wy - r / 5 * 24 + (i - 24) * (r / 5) * Math.sin(angle);
      } else if (i < 57) {
        _x = -wx + 16 * (r / 5) * Math.cos(45 * Math.PI / 180);
        _y = wy - r / 5 * 24 + 16 * (r / 5) * Math.sin(45 * Math.PI / 180);
        angle = -45 * Math.PI / 180;
        _left = _x + (i - 40) * (r / 5) * Math.cos(angle);
        _top = _y + (i - 40) * (r / 5) * Math.sin(angle);
      } else if (i < 73) {
        _left = _x + 16 * (r / 5) * Math.cos(-45 * Math.PI / 180);
        _top = (wy - r / 5 * 24) + r / 5 * (i - 56);
      } else {
        _left = -25;
        _top = 10;
        r = 14;
      }
      li.style.left = _left + 'px';
      li.style.top = _top + 'px';
      li.style.width = r + 'px';
      li.style.height = r + 'px';
    }

    function getStyle(el) {
      if (window.getComputedStyle) {
        return window.getComputedStyle(el, null);
      } else if (document.documentElement.currentStyle) {
        el.currentStyle;
      }
      return null;
    }

    function removeLoad() {
      load.parentNode.removeChild(load);
    }
    // var computed = getStyle(load);
    function animationStart() {
      var computed = getStyle(load);// 时时获取，避免浏览器兼容
      if (!load || computed.opacity === '0') {
        removeLoad();
        return;
      }
      setTimeout(function () {
        if (computed.opacity === '0') {
          removeLoad();
          return;
        }
        liArray.forEach(function (item, i) {
          item.style.transform = 'scale(0)';
          item.style.transitionDelay = (i === liArray.length - 1 ? 10 : i) * .007 + 's';
          item.style.transitionTimingFunction = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';
        });
        setTimeout(function () {
          if (computed.opacity === '0') {
            removeLoad();
            return;
          }
          liArray.forEach(function (item, i) {
            item.style.transform = 'scale(1)';
            item.style.transitionDelay = (i === liArray.length - 1 ? 10 : i) * .007 + 's';
            item.style.transitionTimingFunction = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)';
          });
          setTimeout(animationStart, 1300);
        }, 1300);
      }, 100);
    }
    animationStart();
  </script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83857924-2"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-83857924-2');
  </script>
</body>

<!--script src="common.js"></script-->
<script src="edit.js"></script>

</html>